<template>
  <div>
    <div class='tab_company_out'>
      <div class="title">开票申请单</div>
      <div style="padding-top:5px">
      </div>
      <table cellpadding='0' cellspacing='0'>
        <tr>
          <td class="label" width="20%">开票单位</td>
          <td colspan="3" width="80%" class="value">{{tableData.invoiceUnitName}}</td>
        </tr>
        <tr>
          <td class="label" width="20%">发票类型</td>
          <td class="value" width="30%">{{tableData.invoiceType}}</td>
          <td class="label" width="20%">费用名称</td>
          <td class="value" width="30%">{{tableData.title}}</td>
        </tr>
        <tr>
          <td class="label">开票金额</td>
          <td colspan="3" class="value">{{tableData.invoiceAmount}}</td>
        </tr>
        <tr>
          <td class="label">不含税金额</td>
          <td colspan="3" class="value">{{tableData.amount}}</td>
        </tr>
        <tr>
          <td class="label">税金</td>
          <td colspan="3" class="value">{{tableData.amount}}</td>
        </tr>
        <tr>
          <td colspan="4" class="tip">收票单位信息</td>
        </tr>
        <tr style="height: 50px">
          <td class="label">单位名称</td>
          <td colspan="3" class="value">{{tableData.unitName}}</td>
        </tr>
        <tr style="height: 50px">
          <td class="label">纳税人识别号</td>
          <td colspan="3" class="value">{{tableData.taxNumber}}</td>
        </tr>
        <tr style="height: 50px">
          <td class="label">联系人</td>
          <td class="value">{{tableData.linkMan}}</td>
          <td class="label">联系电话</td>
          <td class="value">{{tableData.linkTel}}</td>
        </tr>
        <tr style="height: 50px">
          <td class="label">单位地址</td>
          <td colspan="3" class="value">{{tableData.supplierAddress}}</td>
        </tr>
        <tr>
          <td class="label">开户行</td>
          <td class="value" colspan="3">{{tableData.bankName}}</td>
        </tr>
        <tr>
          <td class="label">账号</td>
          <td class="value" colspan="3">{{tableData.bankNo}}</td>
        </tr>
        <tr>
          <td class="label">申请人</td>
          <td class="value">{{tableData.nickName}}</td>
          <td class="label">申请日期</td>
          <td class="value">{{tableData.createTime}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>


<script>
  export default {
    name: 'InvoicePrint',
    // 制作打印模版组件时，props区域尽量保留。
    props: {
      tableData: {
        type: Object,
        default() {
          return {
            paymentNo: '',
            deptName: '',
            amountDate: '',
            amount: 0
          }
        }
      },
      getChineseNumber: Function // 求数字的中文写法，从easyPrint组件传入
    },
    data() {
      return {}
    },

    computed: {},

    methods: {
      test() {
        console.log('test')
      }
    }
  }
</script>
<style scoped>
  * {
    padding: 0;
    margin: 0;
    font-color:#000000;
    color: #000000;
    list-style-type: none;
    font-family: "微软雅黑";
    font-size: 12px;
  }

  @page {
    size: auto;
    margin: 3mm;
  }

  .tab_company_out {
    text-align: center;
    width: 98%;
    margin: auto;
    page-break-after: always;
  }

  .title {
    font-size: 17px;

    font-weight: bold;
  }

  .label {
    font-size: 13px;
    font-weight: bold;
  }

  .value {
    font-size: 14px;
    text-align: left;
    padding-left: 10px;
  }

  .tip {
    font-size: 15px;
    text-align: left;
    padding-left: 10px;
    font-weight: bold;
  }


  p {
    overflow: hidden;
    padding: 10px 0;
  }


  table {
    width: 100%;
    border: none;
    border-bottom: 1px solid #000;
  }

  table tr td {
    border: 1px solid #000;
    border-bottom: none;
    border-right: none;
    height: 50px;
    text-align: center;
    line-height: 20px;
  }

  table tr td:last-of-type,
  table tr th:last-of-type {
    border-right: 1px solid #000;
  }


</style>
